<template>
  <el-dialog
    :title="editId ? '编辑菜单' : '新增菜单'"
    v-model="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form :model="skForm" :rules="rules" ref="sk-Form" label-width="100px">
      <el-form-item label="活动名称" prop="title">
        <el-input
          v-model="skForm.title"
          placeholder="请输入活动名称"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="商品类型" class="demo-attrs" prop="second_cateid">
        <el-cascader
          v-model="cateArr"
          :options="cates.cateList"
          :props="{ label: 'catename', value: 'id' }"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="关联商品" class="demo-attrs" prop="goodsid">
        <el-select v-model="skForm.goodsid" prop="goodsid">
          <el-option :value="-1" label="请选择关联商品"></el-option>
          <el-option
            v-for="goods in goods.allGoodsList"
            :key="goods.id"
            :label="goods.goodsname"
            :value="goods.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="活动日期">
        <div class="block">
          <el-date-picker
            v-model="timeArr"
            type="datetimerange"
            start-placeholder="Start Date"
            end-placeholder="End Date"
            :default-time="defaultTime"
          />
        </div>
      </el-form-item>

      <el-form-item label="活动状态" prop="status">
        <el-radio v-model="skForm.status" :label="1">启用</el-radio>
        <el-radio v-model="skForm.status" :label="2">禁用</el-radio>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="submitSeck()"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
// 导入store
import useCateStore from "../../stores/cate";
import useGoodStore from "../../stores/goods";
import useSeckillStore from "../../stores/seck";
// // 声明
const cates = useCateStore();
const goods = useGoodStore();
const seckills = useSeckillStore();

// 定义控制弹窗显隐的变量
const dialogVisible = ref(false);

//关闭弹窗？
const handleClose = (done) => {
  ElMessageBox.confirm("确定关闭吗?", "关闭弹窗！", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      done();
      //   重置表单
      resetForm();
    })
    .catch(() => {
      // catch error
    });
};

// 关闭弹窗
const closeDialog = () => {
  resetForm();
};

// 定义菜单表单
let skForm = reactive({
  title: "",
  begintime: "",
  endtime: "",
  first_cateid: -1,
  second_cateid: -1,
  goodsid: -1,
  status: 1,
});

const validGoods = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请选择关联商品"));
  } else if (value === -1) {
    return callback(new Error("请选择关联商品"));
  } else {
    callback();
  }
};
const validCate = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请选择商品类型"));
  } else if (value === -1) {
    return callback(new Error("请选择商品类型"));
  } else {
    callback();
  }
};

// 表单规则
const rules = reactive({
  title: {
    required: true,
    message: "请输入活动名称",
    trigger: "blur",
  },
  begintime: {
    required: true,
    message: "请选择活动时间",
    trigger: "blur",
  },
  endtime: { required: true, message: "请选择活动时间", trigger: "blur" },
  first_cateid: {
    validator: validCate,
    trigger: "blur",
  },
  second_cateid: {
    validator: validCate,
    trigger: "blur",
  },
  goodsid: { validator: validGoods, trigger: "blur" },
  status: { required: true, message: "请选择活动状态", trigger: "blur" },
});

// 定义编辑id
let editId = ref("");
// 分类数据
let cateArr = reactive([]);
// 时间数组
let timeArr = ref([]);

// 默认时间
const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'

const handleChange = (value) => {
  skForm.first_cateid = value[0];
  skForm.second_cateid = value[1];
};

// 清空表单，关闭弹窗
const resetForm = () => {
  // 重置编辑id
  editId = ref("");
  // 初始化表单
  skForm = reactive({
    title: "",
    begintime: "",
    endtime: "",
    first_cateid: -1,
    second_cateid: -1,
    goodsid: -1,
    status: 1,
  });
  //  重置时间数组
  timeArr = ref([]);
  //  重置分类数据
  cateArr = reactive([]);

  // 关闭弹窗
  dialogVisible.value = false;
};

// 获取数据
onMounted(() => {
  // 调用函数,获取分类数据
  cates.getCateListActions();
  goods.getAllGoodsAction();
});

// 提交
const submitSeck = () => {
  // console.log(timeArr.value, "---------");
  // console.log(" skForm  ", skForm);
  // console.log("editId", editId);
  skForm.begintime = timeArr.value[0].getTime();
  skForm.endtime = timeArr.value[1].getTime();
  // console.log(" skForm  ", skForm);
  // console.log("cateArr", cateArr);
  if (editId.value) {
    seckills.ediSeckActions({ ...skForm, id: editId.value });
  } else {
    seckills.addSeckActions(skForm);
  }
  resetForm();
};

// 接收父组件数据
const acceptValue = (value) => {
  console.log("value", value);
  editId.value = value.id;
  skForm = reactive({ ...value });
  // 设置时间
  var btime = new Date(Number(value.begintime));
  var etime = new Date(Number(value.endtime));
  // console.log("btime", btime);
  // console.log("etime", etime);
  timeArr.value.push(btime, etime);
  cateArr.push(value.first_cateid, value.second_cateid);
};

// 将变量与函数暴露出来,此代码片段放到下面
defineExpose({
  dialogVisible,
  acceptValue,
});
</script>

<style lang="css" scoped>
.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
